<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ group5855Five})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>会员中心</text>
		</view>

		<view class="flex-start-center " style="color:#fff" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#fff" type="left" size="20"></uni-icons>
			<text style="color: fff;font-size: 33rpx;"> 会员中心</text>
		</view>


		<view class="" style="margin-top: 80rpx;">

		</view>
		<view class="rightsInterests flex-start-center" :style="{ '--bg-images': `url(${ crownFive})` }">
			<view class="margin-right_30rpx">
				<image class="upgrade" :src="user.avatar" mode=""></image>
				<image   v-if="user.is_member" class="memberImg" :src="group857Nine" mode="aspectFill"></image>
			</view>
			<view class="">
				<view class="font-weight_bold" style="font-size: 36rpx;">
					{{user.telphone?user.telphone:''}}
				</view>
				<view class="margin-top_20rpx" style="color: #734C0E;">
					<text style="font-size:24rpx;">有限期：{{user.is_member==0?'未开通':user.maturity_time}}</text> <text
						style="font-size:24rpx;margin-left: 20rpx;">算力：{{user.balance}}</text>
				</view>
			</view>


		</view>

		<view class="setMenuContainer ">
			<view class="flex">

				<view class="MmnthlyPackage  flex-column "
					:class="currentIndex==0?'MmnthlyPackageActive':'MmnthlyPackage'" @click="swicthMenu(0)">
					<view class="font-weight_bold">
						包月套餐
					</view>
					<view class="line margin-top_20rpx">

					</view>
				</view>

				<view class="MmnthlyPackage flex-column"
					:class="currentIndex==1?'MmnthlyPackageActive':'MmnthlyPackage'" @click="swicthMenu(1)">
					<view class="font-weight_bold">
						加油包
					</view>
					<view class="line margin-top_20rpx">

					</view>
				</view>

			</view>
			<view class="flex-between margin-top_30rpx padding_0_20rpx">
				<view class="v-title flex-align-center">
					<text></text>
					<view>常用功能</view>
				</view>
				<view class="flex-start-center " style="color:#333333">


					<text style="color: 333333;font-size: 28rpx;" @click="openRecord()"> 开通记录</text>
					<uni-icons style="margin-top: 7rpx;" color="#999999" type="right" size="20"></uni-icons>
				</view>
			</view>

			<view class="imageList">
				<scroll-view @scrolltolower="nextPage" scroll-view scroll-with-animation='true' class="scroll-view_H"
					scroll-x="true">
					<view id="im_0" class="bottom"></view>
					<!-- <block v-for="(item,index) in imageList" :key="index"> -->
					<view class="scroll-view-item_H flex-column" @click="">

						<view class="rechargePrice flex-start-center">
							<block v-for="(item,index) in memberList" :key="index">

								<view @click="switchRechargePrice(index,item)" class="flex-column"
									:class="[current == index?'container':'container-noActive']">
									<view class="preferential flex " v-if="item.is_recommend==1">
										<text>推荐</text>

									</view>
									<view class="margin-top_16rpx">
										<text style="color: #644E3A;font-size: 32rpx;"
											:class="[current == index?'font-weight_bold':'']">{{item.name}}</text>
									</view>
									<view :class="[current == index?'price':'price-noActive']">

										<text style="color: #F24451;font-size: 40rpx;">{{totelName(item.money)}}</text>

									</view>
									<view class="" style="color: #999999;font-size: 24rpx;">
										{{item.desc?item.desc:''}}
									</view>

									<view class="computingPower flex margin_20rpx_0 font-size_24rpx">
										{{item.point}}算力
									</view>


								</view>

							</block>
						</view>
					</view>

					<!-- </block> -->

				</scroll-view>

			</view>

			<!-- 隐私协议 -->
			<radio-group name="apply" class="radioText flex-start-center" :class="'animation-' + animation"
				@click="checkedOn2()">
				<label @click.stop="checkedOn2()">
					<radio :checked="agreeChecked" value="1" color="#e9bc6d"
						style="transform:scale(0.8);padding-left:12rpx;" />
				</label>
				<view class="agree flex-align-center">
					<view>我已阅读并同意</view>
					<text @click.stop="toAgreement()">《{{ memberSet.protocol_name}}》</text>
				</view>
			</radio-group>

			<view class="buy flex" @click="buyVip()">
				立即购买
			</view>

			<view style="color: #AA710E; " class="flex padding_40rpx_0" @click="cardActivation()">
				卡密激活
			</view>
			<view class="v-service-page">
				<view class="font-weight_bold font-size_32rpx padding_20rpx_0">
					开通会员更省钱
				</view>
				<view class="">
					<image style="height: 210rpx;" :src="memberSet.desc" mode="aspectFit"></image>
				</view>
				<view class="font-weight_bold font-size_32rpx padding_20rpx_0">
					会员权益说明
				</view>
				<rich-parser :html="memberSet.rights" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
					lazy-load ref="article" selectable show-with-animation use-anchor lazyLoad="true"></rich-parser>
			</view>
		</view>


		<sunui-popup ref="videoNum">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>卡密激活</text>
						<uni-icons @click='closeVideoNum()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" @input="changeInputTop" type="text" v-model="cardPassword"
									placeholder="请输入激活卡密账号" />
							</view>


						</view>

					</view>






					<view class="PublishTags flex" @click="activateCard()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>







	</view>
</template>

<script>
	import antiThrottling from '@/utils/antiThrottling.js';
	export default {
		data() {
			return {
				VectorFive: this.$imgs.VectorFive,
				group5855Five: this.$imgs.group5855Five,
				group857Nine: this.$imgs.group857Nine,
				animation: '',
				agreeChecked: false,
				protocolInfo: '111',
				navTop: '',
				cardPassword: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				crownFive: this.$imgs.crownFive,
				currentIndex: 0,
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",


				onlineRechargeList: [{
					name: '本月套餐',
					price: 19,
					effectTime: '有效期：1个月',
					computingPower: 3520


				}, {
					name: '本月套餐',
					price: 19,
					effectTime: '有效期：1个月',
					computingPower: 3520


				}, {
					name: '本月套餐',
					price: 19,
					effectTime: '有效期：1个月',
					computingPower: 3520


				}, {
					name: '本月套餐',
					price: 19,
					effectTime: '有效期：1个月',
					computingPower: 3520


				}, {
					name: '本月套餐',
					price: 19,
					effectTime: '有效期：1个月',
					computingPower: 3520


				}],
				current: 0,
				memberSet: {},
				queryPage: {
					psize: 10,
					page: 1

				},
				total: 10,
				memberList: [],
				user: '',
				objMember: {}

			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.memberSetFn()
			this.memberListFn()

			this.userInfos()
			this.createdgetSystemInfo()


		},
		onPageScroll(ev) {
		
		
			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140
		
				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();
		
			} else {
				this.hiddenModel = true
			}
		},
		computed: {
			totelName: function() {
				return function(num) {
					if (num >= 10000000) { // 如果是千万
						let remainder = num % 10000000;
						let quotient = Math.floor(num / 10000000);
						let decimal = Math.floor(remainder / 1000000);
						return quotient + '.' + decimal + '千万';
					} else if (num >= 10000) { // 如果是万
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else { // 小于万
						if(num){
							return num.toString();
						}else{
							return 0
						}
					}
				};
			}

		},

		methods: {
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')
			
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			openRecord() {
				this.$sun.navGo('/pages/contactUs/purchaseRecord')
			},
			// 激活卡密
			async activateCard() {
				if(!this.cardPassword){
					this.$sun.toast('请输入卡密！','none')
                  return 					
				}
				const result = await this.$http.get({
					url: this.$api.useCard,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						card: this.cardPassword
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {




					this.$sun.toast(result.message, 'none')

					setTimeout(() => {
						this.cardPassword=''
						this.userInfos()
						this.$refs.videoNum.close()
						this.cardPassword = ''
					}, 500)


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			nextPage() {
				// console.log(111)
				if (this.queryPage.psize * this.queryPage.page >= this.total) {
					return this.$sun.toast('亲 没有更多了~', 'none')
				} else {
					this.queryPage.page += 1
					// this.init()
					if (this.currentIndex == 0) {
						// 套餐列表
						this.memberListFn()
					} else {
						// 加油宝列表
						this.packageListFn()
					}
				}
			},
			async memberListFn() {
				const result = await this.$http.get({
					url: this.$api.memberList,
					data: {
						page: this.queryPage.page,
						psize: this.queryPage.psize

					}
				});
				if (result.errno == 0) {

					this.memberList = result.data

					if (this.queryPage.page == 1) this.memberList = [];
					this.memberList = this.memberList.concat(result.data);

					this.objMember = this.memberList[0]

					console.log(this.memberList)

				}
			},
			async packageListFn() {
				const result = await this.$http.get({
					url: this.$api.packageList,
					data: {
						page: this.queryPage.page,
						psize: this.queryPage.psize

					}
				});
				if (result.errno == 0) {

					this.memberList = result.data

					if (this.queryPage.page == 1) this.memberList = [];
					this.memberList = this.memberList.concat(result.data);
                   	this.objMember = this.memberList[0]
					console.log(this.memberList)

				}
			},
			toAgreement() {
				this.$sun.navGo('/pages/contactUs/memberCenterAgreement')
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {

					}
				});
				if (result.errno == 0) {

					this.memberSet = result.data

					uni.setStorageSync('memberSet', result.data)

					console.log(this.memberSet)

				}
			},


			navBack() {
				this.$sun.navBack()
			},
			closeVideoNum() {
				this.cardPassword=''
				this.$refs.videoNum.close()
			},

			cardActivation() {
				// if (!this.agreeChecked) {
				// 	this.$sun.toast('请先阅读并同意《会员协议规则》');
				// 	this.animation = 'shake';
				// 	setTimeout(() => {
				// 		this.animation = '';
				// 	}, 1300);
				// 	return;
				// }

				this.$refs.videoNum.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
			},
			swicthMenu(index) {
				this.currentIndex = index

				if (this.currentIndex == 0) {
					// 套餐列表
					this.memberListFn()
				} else {
					// 加油宝列表

					this.packageListFn()


				}
			},
			switchRechargePrice(index, item) {
				console.log(item)
				this.objMember=item

				this.current = index


			},
			checkedOn2(e) {
				this.agreeChecked = !this.agreeChecked
			},

			buyVip() {
				if (!this.agreeChecked) {
					this.$sun.toast('请先阅读并同意《平台交易规则》');
					this.animation = 'shake';
					setTimeout(() => {
						this.animation = '';
					}, 1300);
					return;
				}

				if (this.currentIndex == 0) {
					// 包月
					this.addMemberLogFn(this.objMember)
				} else {
					// 加油包
					this.addPackageLogFn(this.objMember)
				}




			},
			async addPackageLogFn(id) {
				const result = await this.$http.get({
					url: this.$api.addPackageLog,
					data: {
						uid: uni.getStorageSync('uid'),
						package_id: this.objMember.id
					}
				});

				if (result.errno == 0) {

					console.log(result.data)
					this.pays(result.data)

				} else {
					this.$sun.toast(result.message);
				}
			},

			async addMemberLogFn(id) {
				const result = await this.$http.get({
					url: this.$api.addMemberLog,
					data: {
						uid: uni.getStorageSync('uid'),
						member_id: this.objMember.id
					}
				});

				if (result.errno == 0) {

					console.log(result.data)
					this.pays(result.data)

				} else {
					this.$sun.toast(result.message);
				}
			},


			async pays(item) {

				console.log(item)
				const result = await this.$http.post({
					url: this.$api.pay,
					data: {

						// 支付金额
						price: this.objMember.money,
						// 订单编号
						log_no: item,
						// opid
						openid: wx.getStorageSync('user').openid,

						name: this.objMember.name,
					}
				});
				if (result.errno == 0) {
					this.$sun.title('支付');
					const pay = result.data;
					this.$sun.wePay(
						pay,
						async success => {
								this.userInfos()


							},
							async cancel => {
								this.$sun.toast('取消了支付');

								// false 普通商品 true团购商品
								if (this.activitType == 0) {
									this.$sun.navRe('/pages/orderMessage/goodsOrderList/goodsOrderList', {

										tabOrder: 2
									});
								} else if (this.activitType == 1) {
									this.$sun.navRe('/pages/orderMessage/orderList/orderList', {
										tabSwitchOrder: 0,
										tabOrder: 2
									});
								} else if (this.activitType == 2) {
									this.$sun.navRe('/pages/orderMessage/orderList/orderList', {
										tabSwitchOrder: 1,
										tabOrder: 2
									});
								} else if (this.activitType == 3) {
									this.$sun.navRe('/pages/orderMessage/orderList/orderList', {
										tabSwitchOrder: 2,
										tabOrder: 2
									});
								} else if (this.activitType == 4) {
									this.$sun.navRe('/pages/orderMessage/orderList/orderList', {
										tabSwitchOrder: 3,
										tabOrder: 2
									});
								}
							}
					);
				} else {
					this.$sun.toast(result.message);

				}
			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		// background-size: cover;
		position: relative;
		width: 750rpx;
		height: 440rpx;
		padding: 20rpx;
		
		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}
		
		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}
		

		.v-service-page {
			padding: 20rpx;
		}

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.textarea-box {
				// width: 630rpx;
				border-radius: 20rpx;
				background: #F6F8FF;
				padding: 24rpx;

				height: calc(100vh - 1120rpx);

				.textarea-color {
					color: #999;
				}
			}

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		.MmnthlyPackage {
			width: 378rpx;
			height: 113.18rpx;

			border-radius: 20rpx 20rpx 20rpx 20rpx;

			background: rgb(249, 249, 249);
		}

		;

		.MmnthlyPackageActive {
			width: 368rpx;
			height: 113.18rpx;
			position: relative;
			z-index: 99;
			border-radius: 20rpx 20rpx 0rpx 20rpx;

			background: #fff;

			.line {
				width: 32.76rpx;
				height: 7.48rpx;
				border-radius: 204rpx;

				background: rgb(0, 0, 0);
			}
		}

		;

		.setMenuContainer {
			width: 750rpx;
			// height: 1435.98rpx;
			border-radius: 20rpx;
			margin-top: -12rpx;
			// padding: 0 20rpx 20rpx 20rpx;
			border-radius: 20rpx;
			position: relative;
			z-index: 999;
			left: -20rpx;
			background: rgb(255, 255, 255);

			.v-title {
				// padding: 0rpx 26rpx 42rpx;

				text {
					width: 10rpx;
					height: 24rpx;
					border-radius: 138rpx;

					background: #BE9751;
				}

				view {
					margin-left: 10rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			/* 隐私协议 start */
			.radioText {
				margin: 38rpx 0 38rpx 20rpx;
			}

			.agree {
				color: #666;

				text {
					color: #e9bc6d;
					// color: #19c866;
				}
			}

			.animation {
				width: 10rem;
				height: 2rem;
				background: #ffffff;
				margin-top: 0.5rem;
			}

			.buy {
				margin-left: 20rpx;
				font-weight: 700;
				width: 709rpx;
				height: 104rpx;
				border-radius: 126rpx;
				color: #000000;
				background: linear-gradient(90.00deg, rgb(244, 220, 178) 2.102%, rgb(233, 188, 109) 100%);
			}

			.animation-shake {
				animation: shake 0.3s !important;
			}

			@keyframes shake {

				0%,
				100% {
					transform: translateX(0);
				}

				10% {
					transform: translateX(-18rpx);
				}

				20% {
					transform: translateX(16rpx);
				}

				30% {
					transform: translateX(-14rpx);
				}

				40% {
					transform: translateX(12rpx);
				}

				50% {
					transform: translateX(-10rpx);
				}

				60% {
					transform: translateX(8rpx);
				}

				70% {
					transform: translateX(-6rpx);
				}

				80% {
					transform: translateX(4rpx);
				}

				90% {
					transform: translateX(-2rpx);
				}
			}

			/* 隐私协议 end */
			.imageList {
				margin: 18rpx 0 0rpx 20rpx;

				.like {
					width: 36.26rpx;
					height: 36.26rpx;

				}

				.fixedImgBlue {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 204, 254, 0.37);
				}

				.fixedImgPink {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					box-shadow: 0rpx 0rpx 14rpx 6rpx rgba(251, 70, 148, 0.3);
				}

				.fixedImgYellow {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					box-shadow: 0rpx 2rpx 12rpx 8rpx rgba(252, 186, 0, 0.17);
				}

				.fixedBtnImg {
					width: 335.38rpx;
					height: 124rpx;
				}

				.scroll-Y {
					height: 300rpx;
				}

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					height: 327rpx;

				}

				.uni-bg-red {
					background-color: red;
				}

				.uni-bg-green {
					background-color: green;
				}

				.uni-bg-blue {
					background-color: blue;
				}

				.scroll-view-item {
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;
					font-size: 36rpx;
				}

				.scroll-view-item_H {
					display: inline-block;
					margin-right: 10rpx;

					text-align: center;
					font-size: 36rpx;

					.albumIcon {
						width: 216rpx;
						height: 216rpx;
					}

					.release {

						width: 90rpx;
						height: 40rpx;
						line-height: 36rpx;
						;
						margin: auto;
						font-size: 20rpx;
						border-radius: 4rpx;
						border: 2rpx solid #1E6CEB;
						color: #FFF;
						background: #1E6CEB;
					}

					.rechargePrice {
						margin-top: 40rpx;

						.masonry {
							width: 32rpx;
							height: 32rpx;
						}

						.computingPower {
							border-radius: 17rpx;

							background: rgb(241, 212, 161);
							width: 196rpx;
							height: 46rpx;
							color: #644747;
						}

						.container {

							margin: 0 30rpx 20rpx 0;

							width: 240rpx;

							box-sizing: border-box;
							border: 2rpx solid #979797;
							border-radius: 20rpx;
							background: #FCF4E8;
							height: 278rpx;

							.preferential {
								position: relative;
								align-self: flex-start;
								border-radius: 20rpx 0rpx 20rpx 0rpx;
								color: rgb(255, 255, 255);

								font-size: 20rpx;
								font-weight: 400;
								background: rgb(252, 59, 72);
								width: 114rpx;
								height: 48rpx;
								margin-top: -22rpx;



							}
						}

						// .container:nth-child(3n) {
						// 	margin-right: 0;
						// }

						.container-noActive {

							margin: 0 30rpx 20rpx 0;

							width: 240rpx;
							height: 278rpx;

							box-sizing: border-box;
							border: 2rpx solid rgb(234, 234, 234);
							border-radius: 20rpx;

							background: #FAFAFA;

							.preferential {
								align-self: flex-start;
								border-radius: 20rpx 0rpx 20rpx 0rpx;


								color: rgb(255, 255, 255);

								font-size: 20rpx;
								font-weight: 400;
								background: rgb(252, 59, 72);
								width: 114rpx;
								height: 48rpx;
								margin-top: -22rpx;


							}
						}

						// .container-noActive:nth-child(3n) {
						// 	margin-right: 0;
						// }

						.price {
							color: rgb(122, 85, 32);

							font-size: 50rpx;
							font-weight: 700;
						}

						.price-noActive {
							color: rgb(56, 56, 56);

							font-size: 50rpx;
							font-weight: 700;
						}
					}
				}


			}
		}

		.rightsInterests {
			// width: 720rpx;
			background-image: (var(--bg-images));
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;

			height: 193.8rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin-top: 28rpx;
			padding: 20rpx;

			// background: rgb(41, 41, 41);

			.upgrade {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}

			.memberImg {
				position: absolute;
				top: 127rpx;
				width: 108rpx;
				height: 28rpx;
				z-index: 99;
				left: 20rpx;
			}
		}



	}
</style>